<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<style>
    body{
        background-color: white;
    }
</style>
<body>
<div id="tperm">
    <template>
        <div slot="header">
            <el-form inline>
                <el-form-item>
                    <el-button type="success" @click="add">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="permList.data"
                style="width: 100%;margin-bottom: 20px;"
                row-key="permissionId"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="permissionId"
                    label="编号"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="permissionName"
                    label="权限名称"
                    sortable
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="resourceType"
                    label="类型">
            </el-table-column>
            <el-table-column width="100px"
                             prop="icon"
                             label="图标">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    width="50px"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="permCode"
                    label="权限代号">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="路径">
            </el-table-column>
            <el-table-column
                    prop="parentId"
                    label="父级节点">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button @click="update(row)">修改</el-button>
                    <el-button type="danger" @click="del(row.permissionId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-dialog title="新增商品" :visible.sync="addFlag" ref="myForm" center>
        <el-radio-group v-model="labelPosition" size="small">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
            <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="权限名称">
                <el-input v-model="formLabelAlign.permissionName"></el-input>
            </el-form-item>
            <el-form-item label="权限类型">
                <el-input v-model="formLabelAlign.resourceType"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="formLabelAlign.icon"></el-input>
            </el-form-item>
            <el-form-item label="权限代号">
                <el-input v-model="formLabelAlign.permCode"></el-input>
            </el-form-item>
            <el-form-item label="父级节点">
                <el-select @change="searchsort" v-model="formLabelAlign.parentId" placeholder="请选择">
                    <el-option label="父级" :value="-1"></el-option>
                    <el-option
                            v-for="item in permnameList"
                            :key="item.permissionId"
                            :label="item.permissionName"
                            :value="item.permissionId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="顺序">
                <el-input v-model="formLabelAlign.sort" disabled></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="formLabelAlign.url"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="insert" type="primary">提交</el-button>
                <el-button @click="call">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--    修改-->
    <el-dialog title="修改商品" :visible.sync="updateFlag" ref="myForm" center>
        <el-form label-width="80px">
            <el-form-item label="权限名称">
                <el-input v-model="updateRow.permissionName"></el-input>
            </el-form-item>
            <el-form-item label="权限类型">
                <el-input v-model="updateRow.resourceType"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="updateRow.icon"></el-input>
            </el-form-item>
            <el-form-item label="权限代号">
                <el-input v-model="updateRow.permCode"></el-input>
            </el-form-item>
            <el-form-item label="父级节点">
                <el-select @change="searchsortup" v-model="updateRow.parentId" placeholder="请选择">
                    <el-option
                            :v-model="updateRow.State"
                            v-for="item in permnameList"
                            :key="item.permissionId"
                            :label="item.permissionName"
                            :value="item.permissionId">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="顺序">
                <el-input v-model="updateRow.sort" disabled></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="updateRow.url"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="updatePis" type="primary">提交</el-button>
                <el-button @click="updateFlag=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    new Vue({
        el: "#tperm",
        data: {
            permList: [],
            addFlag: false,
            updateFlag: false,
            updateRow: {},
            labelPosition: 'right',
            vo: {
                parentId: -1,
                permname: ""
            },
            formLabelAlign: {
                permissionName: '',
                resourceType: '',
                icon: '',
                permCode: '',
                sort: 0,
                url: '',
                parentId: ''
            },
            permnameList: [],
        },
        methods: {
            search() {
                axios.get("/perm/searchTperlist")
                    .then(({data}) => {
                        this.permList = data;
                    })
            },
            IDsearch() {
                axios.get("/perm/searchPermid")
                    .then(({data}) => {
                        this.permnameList = data.data;
                    })
            },
            add() {
                this.addFlag = true;
                this.searchsort();
            },
            call() {
                this.addFlag = false;
                this.reset();
            },
            insert() {
                axios.post("/perm/addList", this.formLabelAlign)
                    .then(({data}) => {
                        this.addFlag = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                        this.reset()
                    })
            },
            update(row) {
                this.updateFlag = true;
                this.updateRow = row;
            },
            updatePis() {
                axios.put('/perm/updList', this.updateRow)
                    .then(({data}) => {
                        this.updateFlag = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                        this.reset()
                    });
            },
            searchsort() {
                axios.get("/perm/searchsort?parid=" + this.formLabelAlign.parentId)
                    .then(({data}) => {
                        this.formLabelAlign.sort = data.data + 1;
                    })
            },
            searchsortup() {
                axios.get("/perm/searchsort?parid=" + this.updateRow.parentId)
                    .then(({data}) => {
                        this.updateRow.sort = data.data + 1;
                    })
            },
            del(permissionId) {
                this.$confirm("确实要删除么？", "信息提示")
                    .then(() => {
                        axios.delete("/perm/delList?permissionId=" + permissionId)
                            .then(({data}) => {
                                this.$message({
                                    message: data.msg,
                                    type: data.code == 200 ? 'success' : 'error'
                                });
                                this.search();
                            });
                    });
            },
            reset() {
                this.formLabelAlign.permissionName = '',
                    this.formLabelAlign.resourceType = '',
                    this.formLabelAlign.icon = '',
                    this.formLabelAlign.permCode = '',
                    this.formLabelAlign.sort = '',
                    this.formLabelAlign.url = '',
                    this.formLabelAlign.parentId = '';
            }
        },
        mounted() {
            this.search();
            this.IDsearch();
        }
    })
</script>
</body>
</html>